// 折线图
var salesVolume = document.querySelector(".column3_salesVolume .echart");
console.log("🚀 ~ salesVolume:", salesVolume);
var salesVolumeMyChart = echarts.init(salesVolume);
var option3;

option3 = {
  title: {
    text: "单位：万", // 设置左上角单位标签
    left: "8%",
    top: "3%",
    textStyle: {
      fontSize: 12,
      fontWeight: "normal",
      color: "#335db9", // 字体颜色
    },
  },

  legend: {
    data: ["预期销售额", "实际销售额"], // 图例内容
    orient: "horizontal",
    top: "3%", // 图例位置
    right: "8%", // 图例位置
    textStyle: {
      fontSize: 12,
      fontWeight: "normal",
      color: "#335db9", // 字体颜色
    },
  },

  grid: {
    top: "25%", // 上边距
    left: "10%", // 左边距
    right: "10%", // 右边距
    bottom: "20%", // 下边距
  },
  xAxis: {
    type: "category",
    data: [
      "1月",
      "2月",
      "3月",
      "4月",
      "5月",
      "6月",
      "7月",
      "8月",
      "9月",
      "10月",
      "11月",
      "12月",
    ],
    axisLabel: {
      interval: 0, // 显示所有标签
    },
    axisLine: {
      show: true, // 显示 Y 轴线
      lineStyle: {
        color: "#3d4965", // 设置 Y 轴线颜色
      },
    },
    axisTick: {
      show: false, // 隐藏 X 轴刻度
    },
  },
  yAxis: {
    type: "value",
    min: 0, // 设置最小刻度
    max: 80, // 设置最大刻度
    interval: 20, // 设置刻度间隔
    axisLine: {
      show: true, // 显示 Y 轴线
      lineStyle: {
        color: "#3d4965", // 设置 Y 轴线颜色
      },
    },
    splitLine: {
      show: true, // 显示网格线
      lineStyle: {
        color: "#3d4965", // 设置分割线颜色
      },
    },
  },
  series: [
    {
      name: "预期销售额", // 数据系列名称
      data: [0, 20, 40, 60, 30, 70, 30, 60, 30, 20, 10, 40], // 蓝线数据
      type: "line",
      smooth: true,
      lineStyle: {
        color: "#77f4ff", // 蓝色
      },
    },
    {
      name: "实际销售额", // 数据系列名称
      data: [0, 30, 50, 70, 20, 60, 40, 10, 30, 50, 60, 70], // 红线数据
      type: "line",
      smooth: true,
      lineStyle: {
        color: "#ee392c", // 红色
      },
    },
  ],
};
salesVolumeMyChart.setOption(option3);

//轮播效果
var salesUlLi = document.querySelectorAll(".column3_salesVolume ul li");
var salesUl = document.querySelector(".column3_salesVolume ul");
var arr1 = [
  [0, 20, 40, 60, 30, 70, 30, 60, 30, 20, 10, 40],
  [20, 30, 20, 30, 60, 50, 20, 70, 70, 40, 80, 70],
  [40, 60, 70, 50, 20, 80, 80, 30, 40, 30, 60, 30],
  [60, 30, 30, 70, 40, 30, 70, 60, 60, 10, 40, 20],
];
var arr2 = [
  [0, 30, 50, 70, 20, 60, 40, 10, 30, 50, 60, 70],
  [60, 30, 30, 70, 40, 30, 70, 60, 60, 10, 40, 20],
  [0, 20, 40, 60, 30, 70, 30, 60, 30, 20, 10, 40],
  [20, 30, 20, 30, 60, 50, 20, 70, 70, 40, 80, 70],
];
var index = 0;

salesUl.addEventListener("click", function (e) {
  if (e.target.tagName.toLocaleUpperCase() === "LI") {
    changeLine(e.target.dataset.id);
  }
});
function getIndex() {
  index++;
  if (index > 3) {
    index = 0;
  }
}

function changeColor() {
  salesUlLi.forEach((item) => {
    item.style.background = "none";
  });
  salesUlLi[index].style.background = "#5381e5";
  salesUlLi[index].style.color = "#fff";
}

function changeLine(index) {
  option3.series[0].data = arr1[index];
  option3.series[1].data = arr2[index];
  salesVolumeMyChart.setOption(option3);
}

var timer = null;
salesUlLi[0].style.background = "#5381e5";
salesUlLi[0].style.color = "#fff";
timer = setInterval(function () {
  getIndex();
  changeColor();
  changeLine(index);
  changeTextColor();
  changeBotText(index);
}, 1000);
console.log(option3.series[0].data);
